
<template>
  <div>
    <table class="table table-hover table-bordered">
      <thead>
        <tr>
          <th>#</th>
          <th>学号</th>
          <th>姓名</th>
          <th>班级</th>
          <th>签到</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(student, index) in students_class" :key="student.id">
          <td class="num">{{index}}</td>
          <td class="id">{{student.id}}</td>
          <td class="name">{{student.name}}</td>
          <td class="class">{{student.class}}</td>
          <td>
            <div class="field">
              <div class="control">
                <div class="select">
                  <select class="position" v-model="student.status">
                    <option value="在校">在校</option>
                    <option value="外出实习">外出实习</option>
                    <option value="请假回家">请假回家</option>
                    <option value="不在校">不在校</option>
                  </select>
                </div>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <button type="button" class="btn btn-success" @click="submitClassSignin">提交签到数据</button>
  </div>
</template>

<script>
const qs = require("qs");

export default {
  name:"classSignin",
  
  data(){
    return {
      students_class: [],//班长管理本班同学
    }
  },
  created(){ 
    this.getStudentClass();
  },
  methods:{
    getStudentClass() {
      const post_data = {
        cookie: window.localStorage._t_s_l_
      };
      this.axios({
        method: "post",
        url: "/get_students_class",
        data: qs.stringify(post_data),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }).then(({ data }) => {
        if (data.status) {
          this.students_class = data.data.students;
        }
      });
    },
    submitClassSignin() {
      const post_data = [];
      this.students_class.forEach((item, index) => {
        post_data.push(JSON.stringify({id: item.id, status: item.status}))
      });
      this.axios({
        method: "post",
        url: "/update_status",
        data: qs.stringify(post_data),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }).then(({ data }) => {
        if (data.status) {
          alert("今日签到成功");
        }
      });
    }
  }
}
</script>

<style lang="less">

</style>
